import { randomNum } from "../shared/utils";

const reg_var = /\{\{(.*?)\}\}/g; // 找到 {{ xxx }} 里面的内容
const reg_data_dom = /\<.+?\>\{\{(.+?)\}\}\<\/.+?\>/g; // 找到包裹{{}}的标签
const reg_tag = /\<(.+?)\>/; // 找到标签名
const reg_frontTag = (node) => { // 找到(前)标签名
  return new RegExp(`\<(.*?)\>${node}\</.*?\>`)
}

let o = 0; // 添加每次添加后的标识(区分flag)
export const statePool = []; // 保存节点标识

// 专门处理数据与模板
export function stateFormat(template, state) {
  // console.log(template, state);
  let _state = {};

  // 先处理包裹{{}}的标签，增加标识
  template = template.replace(reg_data_dom, (node, key) => {
    // console.log(node, key); // <h1>{{ count }}</h1>  count
    // 找到包裹着{{xxx}}的元素标签名
    const matched = node.match(reg_tag)[1];
    // console.log(matched);
    // 给节点标签 增加标识，方便找到之后找到对应节点进行操作
    const _flag = randomNum();

    _state.flag = _flag;

    statePool.push(_state);

    _state = {};
    // console.log(statePool);

    return `<${matched} data-dom="${_flag}">{{ ${key} }}</${matched}>`
  })

  // 把{{xxx}}里的内容替换
  return template.replace(reg_var, (node, key) => {
    // console.log(node, key);
    let _var = key.trim(); // 可能为xxx.xxx.xxx 对象包裹着对象
    // console.log(state[_var])
    const _varArr = _var.split('.'); // 转成数组形式
    
    // const matched = template.match(reg_frontTag(node))[1];

    // 找到对应key的值
    let i = 0;
    while (i < _varArr.length) {
      _var = state[_varArr[i]];
      i ++;
    }

    _state.state = _varArr;

    // statePool.push(_state);
    statePool[o].state = _varArr;
    o++;

    return _var;
  })
}